<!-- name -->
<script setup name="login">
import login_img from "@/assets/image/login.png"
import { reactive } from "vue"
import { useAuthStore } from "@/stores/auth.js";
import { useRouter } from "vue-router"
import authHttp from "@/api/authHttp"
import { ElMessage } from "element-plus"
// 路由跳转是useRouter 
// useRoute是保存路由信息的

const authStore = useAuthStore()
const router = useRouter()

let form = reactive({
    email: "",
    password: ""
})


const onSubmit = async () => {
    let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
    let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/
    if (!(emailRgx.test(form.email))) {
        ElMessage.info("邮箱格式不满足")
        return;
    }
    if (!(pwdRgx.test(form.password))) {
        ElMessage.info("密码格式不满足")
        return;
    }
    // 1、请求第一版：直接使用axios
    // axios 发请求ajax用 不用原生js写发请求
    // 它会返回promise对象 200会走到then里
    // axios
    // promise
    // 配置：设置超时时间
    // url: 完整的url
    // axios.post("http://127.0.0.1:8000/auth/login/", {
    //     email: form.email,
    //     password: form.password,
    // }).then((res) => {
    //     // then代表是成功的情况（在这里，代表返回的状态码是200）
    //     let data = res.data;
    //     let token = data.token;
    //     let user = data.user;
    //     authStore.setUserToken(user, token)
    //     // 跳转到OA系统首页
    //     router.push({ name: "frame" })

    // }).catch((err) => {
    //     // catch代表是失败的情况（在这里，代表返回的状态码不是200）
    //     let detail = err.response.data.detail;
    //     alert(detail)
    // })

    // 2、对axios进行了一层封装
    // 封装的太严重了，如果不明白很容易看傻
    // authHttp.login,会调用authHttp实例的login函数，而login函数会调用自己在http.js中写的post像后端发送请求
    // authHttp.login(form.email, form.password).then(res => {
    //     let data = res.data;
    //     let token = data.token;
    //     let user = data.user;
    //     authStore.setUserToken(user, token);
    //     // 跳转到OA系统的首页
    //     router.push({ name: "frame" })
    // }).catch((err) => {
    //     // catch：代表失败的情况（在这里，代表返回的状态码是非200）
    //     let detail = err.response.data.detail;
    //     alert(detail);
    // })
    // 3、第三个版本：改成了异步调用的方式
    try {
        let data = await authHttp.login(form.email, form.password)

        let token = data.token;
        let user = data.user;
        authStore.setUserToken(user, token)
        // 跳转到OA系统首页
        router.push({ name: "frame" })
    } catch (detail) {
        ElMessage.error(detail)
    }
}

</script>

<template>
    <div class="dowebok">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img :src="login_img" alt="IMG" />
                </div>

                <div class="login100-form validate-form">
                    <span class="login100-form-title"> 员工登陆 </span>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" type="text" name="email" placeholder="邮箱" v-model="form.email" />
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" type="password" name="password" placeholder="密码"
                            v-model="form.password" />
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" @click="onSubmit">
                            登陆
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>
